<template>
  <div class="user">
    <div class="header">
      <div class="top">
        <router-link to="/per">
          <img src="../assets/img/touxiang.jpg" alt="" />
        </router-link>

        <div class="top-center">
          <p>gbhj</p>
          <p>id: <span>123</span></p>
        </div>
        <div>
          <i class="iconfont"> &#xe62f;</i>
        </div>
      </div>

      <div class="bottom">
        <p>未开通会员</p>
        <p>立即激活></p>
      </div>
    </div>
    <div class="order">
      <div class="order-top">
        <h3>订单中心</h3>
        <p>查看全部></p>
      </div>
      <div class="order-bottom">
        <div v-for="(item, index) in order" :key="index" class="oder-cont">
          <i :class="['iconfont', item.icon]"></i>
          <p>{{ item.name }}</p>
        </div>
      </div>
    </div>
    <div class="service">
      <h3>我的服务</h3>
      <div
        class="service-cont"
        v-for="(item, index) in serviceList"
        :key="index"
        @click="handlocation(index)"
      >
        <img :src="item.pic" alt="" />
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div class="esc"  @click="handleEsc">
      <router-link to="/">退出登录</router-link>
    </div>
    <div class="footer">
      <img src="../assets/img/download.png" alt="" />
    </div>
  </div>
</template>

<script>
import { serviceList } from "../api/service";
export default {
  data() {
    return {
      order: [
        { name: "待付款", icon: "icon-daifukuan" },
        { name: "待发货", icon: "icon-daifahuo" },
        { name: "待收货", icon: "icon-daishouhuo" },
        { name: "待评价", icon: "icon-daipingjia" },
        { name: "售后/退款", icon: "icon-shouhou" },
      ],
      aa: [{ name: "我的余额", cont: "00.00" }],
      serviceList: [],
    };
  },
  created() {
    serviceList().then((res) => {
      this.serviceList = res.data.data.routine_my_menus;
    });
  },
  methods: {
    handlocation(i) {
      if (i == 8) {
        // location = "/#/site";
        this.$router.push({
          path: "/site/",
        });
      }
    },
    handleEsc(){
      this.$store.commit('my/initInfoMut',null)
    }
  },
};
</script>

<style lang="less" scoped>
@import url(../assets/font/iconfont.css);
.user {
  background: #f7f7f7;
  height: 100vh;
}
.header {
  height: 106px;
  padding: 10px 10px 0;
  background: #ff448f;
  .top {
    display: flex;
    height: 60px;
    justify-content: space-between;
    align-items: center;
    img {
      width: 60px;
      height: 60px;
    }
    .iconfont {
      font-size: 21px;
      margin-right: 10px;
    }
    .top-center {
      width: 200px;
      text-align: left;
      p {
        line-height: 20px;
        color: #fff;
        line-height: 25px;
      }
      p:nth-of-type(2) {
        color: hsla(0, 0%, 100%, 0.6);
      }
    }
  }

  .bottom {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    padding: 0 40px 0 55px;
    background: url(../assets/img/huiyuan.png) no-repeat;
    background-size: 100% 100%;
    height: 42px;
    color: #905100;
    font-weight: 400;
  }
}
.order {
  // width: 100%;
  margin: 10px 10px;
  display: flex;
  height: 100px;
  padding: 0 10px;
  background: #fff;
  border-radius: 10px;
  flex-direction: column;
  font-size: 12px;
  .order-bottom {
    width: 100%;
    display: flex;
    padding: 5px 0;
    justify-content: space-around;
    text-align: center;
    p {
      margin-top: 5px;
    }
  }
  .oder-cont {
    height: 50px;
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  .order-top {
    width: 100%;
    display: flex;
    font-size: 13px;
    justify-content: space-between;
    height: 20px;
    padding: 10px 0;
    h3 {
      font-size: 15px;
      color: #282828;
      font-weight: 700;
    }
    p {
      color: #666;
    }
  }
}
.service {
  margin: 10px 10px 0;
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  flex-shrink: 1;
  h3 {
    width: 100%;
    height: 20px;
    padding: 15px 10px;
  }
  .service-cont {
    width: 65px;
    height: 76px;
    margin: 10px 2px;
    text-align: center;
    // background: chocolate;
    img {
      margin: 5px 0;
      width: 26px;
      height: 26px;
    }
    span {
      display: block;
      width: 100%;
      height: 20px;
      padding: 10px 0;
      // background: cornflowerblue;
      font-size: 13px;
    }
  }
}
.esc{
  width: 100vw;
  height: 40px;
  background: #ff448f;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  a{
    color: #fff;
  }
}
.footer {
  background: #f7f7f7;
  padding: 20px 0 70px;
  width: 100%;
  text-align: center;
  img {
    display: inline-block;
    width: 109px;
    height: 37px;
  }
}
</style>
